<template>
    <div>
        <el-dialog :title="title" :visible.sync="addVisible" :close-on-click-modal="false"
            :close-on-press-escape="false" @closed="handlerCancel()">
            <el-form :model="bannerInfo">
                <el-form-item label="ID" :label-width="formLabelWidth">
                    <el-input v-model="bannerInfo.id" :disabled="!isadd"></el-input>
                </el-form-item>
                <el-form-item label="标题" :label-width="formLabelWidth">
                    <el-input v-model="bannerInfo.title"></el-input>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch style="display: block" v-model="bannerInfo.status" :active-value="1" :inactive-value="0"
                        active-color="#13ce66" inactive-color="#ff4949" active-text="启用" inactive-text="禁用">
                    </el-switch>
                </el-form-item>
                <el-form-item label="头像" :label-width="formLabelWidth">
                    <el-upload class="avatar-uploader" action="/api/auth/banner/upload" :show-file-list="false"
                        :headers="headers" name="face" :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="bannerInfo.icon" :src="bannerInfo.icon" class="avatar" width="100" height="100">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handlerCancel()">取 消</el-button>
                <el-button type="primary" @click="handlerSave()">保 存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { infoBannerApi, addBannerApi, editBannerApi } from '@/api/BannerApi'
export default {
    props: ['addVisible', "title"],
    data() {
        return {
            bannerInfo: {
                id: "",
                title: "",
                status: 0,
                icon:""
            },
            isadd: false,
            formLabelWidth: '120px'
        };
    },
    methods: {
        handlerCancel() {
            this.$emit('closeDialog');
        },
        async handlerSave() {
            if (!this.bannerInfo.title) {
                this.$message.error('标题不能为空');
                return;
            }
            try {
                let res;
                if (this.isadd) {
                    res = await addBannerApi(this.bannerInfo);
                } else {
                    res = await editBannerApi(this.bannerInfo);
                }
                if (res.status === 200) {
                    this.$message({
                        message: res.msg,
                        type: 'success',
                        duration: 1000,
                        onClose: () => {
                            this.$emit('closeDialog', true);
                        }
                    });
                } else {
                    this.$message.error(res.msg || '接口返回异常');
                }
            } catch (error) {
                console.error('保存轮播图信息失败:', error);
                this.$message.error('网络错误，请稍后重试');
            }
        },
        async openDialog(bannerId) {
            if (!bannerId) {
                this.bannerInfo = {
                    id: "",
                    title: "",
                    status: 0
                };
                this.isadd = true;
            } else {
                try {
                    this.isadd = false;
                    const res = await infoBannerApi(bannerId);
                    if (res.status === 200) {
                        this.bannerInfo = res.data;
                    } else {
                        this.$message.error(res.msg || '接口返回异常');
                    }
                } catch (error) {
                    console.error('获取轮播图信息失败:', error);
                    this.$message.error('网络错误，请稍后重试');
                }
            }
        }
    }
};
</script>

<style scoped lang="less">
/* 可以根据需要添加样式 */
</style>